import Vue from 'vue'

const component = {
  template: `<div>
  <slot name="header"></slot>
  <div></div>
  <slot name="body"> </slot>
  <div>
  <slot name="footer1" :aaa="value" ccc ='ccc123'></slot>
</div>
<div>
<slot name="footer2" :aaa='value' ccc='ccc123123'></slot>
</div>
</div>`,
  data () {
    return {
      value: 'testData',

    }
  },
  props: {
    aaa: String
  }
}

new Vue({
  el: "#app",
  components: {
    component2: component
  },
  data () {
    return {
      value: "Vue "
    }
  },
  template: `<div><component2 >
<span slot="header">header</span>
<span slot="body">body123</span>
<span slot="footer1" slot-scope="footer">{{value}}-{{footer.aaa}}-{{footer.ccc}}</span>
<span slot="footer2" aaa>123123</span>
</component2></div>`
})
